<template>
  <div @click="handleLink" :class="{ active: $route.path === path }">
    <slot name="icon"></slot>
    <slot name="title"></slot>
  </div>
</template>

<script>
export default {
  props: {
    path: {
      type: String,
      default: '/'
    }
  },
  methods: {
    handleLink() {
      if (this.$route.path !== this.path) {
        this.$router.replace(this.path)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.active {
  color: var(--theme-color);
}
</style>
